import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Button, Image } from '@tarojs/components'
import { AtAvatar, AtIcon } from 'taro-ui'

import CTopbar from '@/components/CTopBar/index'
import CImage from '@/components/CImage/index'
import { get_my_collect_api, isLike_api } from './service'
import './index.scss'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import like from '@/assets/like.png'
import dislike from '@/assets/dislike.png'
import not_found from '@/assets/not_found.png'
/**
 * 我的关注界面
 */

class MyAttention extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      CollectData: [],
      islike_status: true,
      system: '',
      pageSize: 20,
      pageNum: 1,
    }
  }
  componentWillMount() {
    const system = Taro.getStorageSync('system')
    this.setState({
      system,
    })
    this.get_attention_list()
  }
  get_attention_list() {
    const { pageSize, pageNum, CollectData } = this.state
    const type = 3
    const params = {
      type,
      pageSize,
      pageNum,
    }
    get_my_collect_api(params).then(({ result, data }) => {
      const arr = Array.from(data)
      this.setState({
        CollectData: CollectData.concat(...arr),
      })
    })
  }

  isLike(id, type) {
    isLike_api(id, type).then(({ result, data, message }) => {
      if (result < 0) {
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000,
        })
        return
      }
      this.get_attention_list()
    })
  }
  goto_reserve_page(id) {
    Taro.navigateTo({
      url: '/pages/Consulting/ConsultingDetails/index?id=' + id,
    })
  }

  onReachBottom() {
    const { pageNum } = this.state
    this.setState(
      {
        pageNum: pageNum + 1,
      },
      () => {
        this.get_attention_list()
      },
    )
  }

  render() {
    const consultTeacherTypeArr = ['', '高级', '资深', '主任', '专家']
    const { CollectData, islike_status, system } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='我的关注' showBack></CTopbar>
        </View>
        {CollectData.length === 0 ? (
          <View className='noContent'>
            <View>
              {/* <CImage src='https://img.yalayi.net/d/file/2020/07/24/779140cf37a9c7786c4e4e9014589aea.jpg'></CImage> */}
              <CImage src={not_found}></CImage>
            </View>
            <View>亲，您还没有关注的心理咨询师 快去关注几个呗！</View>
            <View
              onClick={() => {
                Taro.switchTab({
                  url: '/pages/Consulting/index',
                })
              }}
            >
              去关注
            </View>
          </View>
        ) : (
          <View className='consulting'>
            {CollectData !== []
              ? CollectData.map((c, i) => {
                  return (
                    <View className='wrapper' key={i}>
                      <View className='content'>
                        <View className='left'>
                          <AtAvatar image={c.therapistImg} circle size='large'></AtAvatar>
                        </View>
                        <View className='right'>
                          <View className='title'>{c.therapistName}</View>
                          <View className='rank'>国家{consultTeacherTypeArr[c.consultTeacherType]}心理咨询师</View>
                          {/* <View className='noto'>{c.briefIntroduction}</View> 个人简介为富文本 不可展示源码 */}
                          <View className='footer'>
                            {system.indexOf('iOS') < 0 ? (
                              <View>
                                {c.price}元/{c.time}分钟
                              </View>
                            ) : (
                              '免费'
                            )}

                            <View>{c.type === 0 ? '当面' : '视频'}</View>
                            <View onClick={this.isLike.bind(this, c.id, 3)}>
                              {islike_status ? <Image src={like} /> : <Image src={dislike} />}
                              <Text>{islike_status ? '已收藏' : '收藏'}</Text>
                            </View>
                          </View>
                        </View>
                      </View>
                      {system.indexOf('iOS') < 0 ? (
                        <Button className='btn' onClick={this.goto_reserve_page.bind(this, c.id)}>
                          预约
                        </Button>
                      ) : (
                        <Button className='btn' onClick={this.goto_reserve_page.bind(this, c.id)}>
                          查看
                        </Button>
                      )}
                    </View>
                  )
                })
              : ''}
          </View>
        )}
      </View>
    )
  }
}

export default MyAttention
